<template>
    <section class="watchSection">
        <layout :isVertical="true">
            <!-- <common-toolbar text="影院放映日志">
                <el-button class="btn commonButton" type="default" @click="dialogVisible=true">筛选</el-button>
                <el-button class="btn commonButton" v-if="!onlyShowError" type="default" @click="searchErrorList">仅查看异常数据</el-button>
                <el-button class="btn commonButton" v-if="onlyShowError" type="default"  @click="searchAllList">查看全部数据</el-button>
            </common-toolbar> -->
            <layout layout="center"  class="centerSection noScrollSection">
                <!-- <el-table
                        :data="data"
                        v-loading.iTable="loading"
                        :stripe="true"
                        ref="mutipleTable"
                        :height="height"
                        :highlight-current-row="true"
                        border
                        :tree-props="{children: 'children'}"
                        row-key="id"
                        header-row-class-name="tableHeader"
                        tooltip-effect="dark"
                        class="watchTable"
                        style="width: 100%">
                    <el-table-column
                            label="No."
                            type="index"
                            :index="indexMethod"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            property="name"
                            label="影院名称"
                            width="280"
                    >
                    </el-table-column>
                    <el-table-column
                            property="cinemaName"
                            label="影厅"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            property="showTime"
                            label="放映时间"
                            width="200">
                        <template slot-scope="scope">
                            <div style="text-align: left;line-height: 30px;height: 30px;">
                                {{scope.row.playDate}}
                            </div>
                            <div style="text-align: left;line-height: 30px;height: 30px;">
                                {{scope.row.playTime}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            property="content"
                            label="放映内容与进度">
                        <template slot-scope="scope">
                            <div style="text-align: left;line-height: 30px;height: 30px;">
                                {{scope.row.movie}}
                            </div>
                            <div style="text-align: left;line-height: 30px;height: 30px;">
                                总时长:{{scope.row.totalTime}}
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="paginationDiv">
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            @current-change="handleCurrentChange"
                            :page-size="pageSize"
                            :total="total">
                    </el-pagination>
                </div> -->
            
            </layout>
        </layout>
        <el-dialog
                title="筛选"
                :visible.sync="dialogVisible"
                width="30%">
            <div>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="专资编码">
                        <el-input size="small" v-model="form.code"></el-input>
                    </el-form-item>
                    <el-form-item label="影院名称">
                        <el-input size="small" v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="时间范围">
                        <el-date-picker
                                v-model="form.date"
                                type="daterange"
                                range-separator="至"
                                size="small"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer" style="padding:10px;">
                <el-button class="btn commonButton" @click="dialogVisible = false">取 消</el-button>
                <el-button class="btn commonButton" type="default" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import Service from './showStatusWatch.service';
import {JSEncrypt} from 'jsencrypt';
import base from '@/scrollLoad';
import moment from 'moment';
let API_AD = window.process.config.Advertising
@Component
export default class cinemaShowLog extends Vue{
    height = 500;
    windowHeight = 700;
    loading = false;
    data = [];
    onlyShowError = false;
    total = 0;
    page = 1;
    pageSize = 30;
    cinemaName = '';
    cinemaCode = '';

    dialogVisible = false;
    form = {
        name: '',
        code: '',
        date : ''
    };
    constructor(){
        super();

    };
     // 序号
    indexMethod(index) {
    return (this.page - 1) * this.pageSize + index + 1;
    }
    searchErrorList(){
        this.onlyShowError = true;
        this.searchList();
    }

    searchAllList(){
        this.onlyShowError = false;
        this.searchList();
    }

    searchList(){
        let params = {
            page: this.page,
            pageSize: this.pageSize,
            status: 0,
            cinemaName: this.cinemaName,
            cinemaCode: this.cinemaCode,
        }
        //console.log(params)

        this.data = [];
        let list = [];
        for(let i=0;i<30;i++){
            list.push({
                id: i,
                name : '影厅名称' + i,
                cinemaName : (i+1)+'号厅' ,
                movie: 'ShengXiaWeiLai-2D_185_JP_115M_PTH_51_0721',
                totalTime: '02:00:54',
                playDate: '2021-11-18',
                playTime: '08:00~10:00',
            });
        }

        this.data = list;

        this.total = this.data.length;
    }

    handleSizeChange(val) {
        this.pageSize = val;
        this.searchList();
    }

    handleCurrentChange(val) {
        this.page = val;
        this.searchList();
    }

    showDetail(){

    }

    dateFormat(date){
        return moment(date).format("YYYY-MM-DD,H:m:s");
    }

    resizeEvent(){
        this.windowHeight = document.documentElement.clientHeight;
        this.height = this.windowHeight - 210;
    }

    created(){
        const me = this;
        this.resizeEvent();
        this.searchList();
        window.onresize = () => {
            return (() => {
                me.resizeEvent();
            })()
        };
        // //console.log(API_AD+'?id=1')
        let userInfoForm = JSON.parse(window.sessionStorage.getItem('userInfoForm'));
        // //console.log(userInfoForm)
        window.open(API_AD+'?holderCode='+userInfoForm.holderCode, '_blank')
    };
    mounted(){

    };

}
</script>
<style lang="scss" scoped>
    @import '../../styles/login.scss';

</style>